<template>
  <div>
    <!-- 批量添加页, 此组件最好像EditOrAddingDialog一样封装成dialog而不是el-card -->
    <MassAdditions v-show="isShowMassAdditions" @completed="isShowMassAdditions = false" />
    <!-- 主页 -->
    <el-card v-show="!isShowMassAdditions" class="box-card">
      <el-table :data="tableData" :header-cell-style="{ textAlign: 'center' }" align="center" header-align="center"
        style="width: 100%">
        <el-table-column prop="eqtype" label="设备种类" align="center" />
        <el-table-column prop="ta_net_type" label="表组网类型" align="center" />
        <el-table-column prop="communication" label="通信方式" align="center" />
        <el-table-column prop="meter_option" label="抄表选项" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" type="success" @click="editTap(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button size="small" type="danger" @click="deleteTap(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 导入导出Excel -->
      <div class="right">
        <el-button color="#626aef" :icon="UploadFilled" size="small">导入</el-button>
        <el-button type="primary" :icon="Download" size="small">导出</el-button>
      </div>
      <!-- 分页和搜索 -->
      <el-pagination class="right" :page-sizes="[10, 20, 50, 100]" :small="true"
        layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" />
      <div class="right">
        <el-input v-model="queryByEqType" placeholder="输入设备种类进行查询" />
        <el-button color="#626aef">查询</el-button>
        <el-button type="primary" @click="isShowEditOrAddingDialog = !isShowEditOrAddingDialog; isEdit = false">
          新增
        </el-button>
        <el-button type="warning" @click="isShowMassAdditions = !isShowMassAdditions">批量添加</el-button>
      </div>
    </el-card>
    <!-- 编辑弹出框 -->
    <!-- 
      当子组件事件名为modelValue时可以省略可写成v-model, 如<EditOrAddingDialog v-model="isShowEditOrAddingDialog" :isEdit="true"/>
      关于事件和v-model相关文档 https://staging-cn.vuejs.org/guide/components/events.html#usage-with-v-model
      相关视频 https://www.bilibili.com/video/BV1gY4y157cM?spm_id_from=333.337.search-card.all.click&vd_source=90d5923f771e4efae6fddc7b9291529a
      所以v-model实现双向绑定原理还是基于子组件传递事件给父组件修改，避免子组件直接修改props属性
    -->
    <EditOrAddingDialog v-model:modelValue="isShowEditOrAddingDialog" :isEdit="isEdit"
      @added="tableData.push($event)" />

    <!-- 删除弹出框，此弹窗可以用ElMessageBox替代-->
    <!-- <el-dialog v-model="isShowDeleteDialog" title="删除">
      <span>确定要删除该项吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isShowDeleteDialog = false">取消</el-button>
          <el-button type="primary" @click="Configure">确定</el-button>
        </span>
      </template>
    </el-dialog> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import {
  UploadFilled,
  Download,
} from "@element-plus/icons-vue";
import MassAdditions from "./massAdditions.vue"
import EditOrAddingDialog from "./editOrAddingDialog.vue"
import { ElMessageBox } from 'element-plus'

const queryByEqType = ref("");                // 通过设备种类查询
const isEdit = ref(true)                      // 控制EditOrAddingDialog的类型
const isShowEditOrAddingDialog = ref(false)   // 显示编辑或添加弹窗
const isShowMassAdditions = ref(false)        // 显示批量删除页
// const isShowDeleteDialog = ref(false)         // 显示删除弹出框

// 表单数据
const tableData = reactive([
  {
    eqtype: "a",
    ta_net_type: "采集器电表",
    communication: "LORA",
    meter_option: "单相电压,单相电流,频率",
  },
  {
    eqtype: "b",
    ta_net_type: "无线电表",
    communication: "485",
    meter_option: "单相电压,单相电流,频率",
  },
  {
    eqtype: "c",
    ta_net_type: "无线电表",
    communication: "蓝牙",
    meter_option: "单相电压,单相电流,频率",
  },
  {
    eqtype: "d",
    ta_net_type: "采集器电表",
    communication: "其他",
    meter_option: "单相电压,单相电流,频率",
  },
  {
    eqtype: "e",
    ta_net_type: "采集器电表",
    communication: "3G",
    meter_option: "单相电压,单相电流,频率",
  },
])

// 函数尽量用function声明，可以避免和数据混淆
/**
 * 数据编辑按钮点击时
 */
function editTap(record, index) {
  isEdit.value = true
  console.log(index, record);
}
/**
 * 数据删除按钮点击时
 */
function deleteTap(index) {
  ElMessageBox.confirm('确定要删除该项吗？', '删除', { cancelButtonText: '取消', confirmButtonText: '我™就是要删', type: 'warning' })
    .then(() => console.log(index, '已被删除...'))
    .catch(() => console.log(index, '已取消了删除...'))
}

// 删除确认弹窗确认时 Configure? confirm
// function Configure() {
//   // const i=id.value
//   isShowDeleteDialog.value = !isShowDeleteDialog.value
//   tableData.splice(id.value, 1);
// }
</script>

<style scoped>
.box-card {
  width: 70%;
  min-width: 850px;
}

.right {
  display: flex;
  justify-content: end;
  margin: 10px;
}

.el-input {
  width: 300px;
  margin-right: 15px;
}

h5 {
  text-align: center;
}
</style>
